<template>
	<view class="bg-white shadow rounded-lg p-20 mb-20">
		<view class="flex" @click="goStudyDetails(val.id)">
			<view class="rounded-md overflow-hidden relative w-172 h-172">
				<ImageBoxVue :src="val.headimg" width="176rpx" height="172rpx"></ImageBoxVue>
				<view class="absolute w-full py-4 pl-10 bottom-0" style="background-color: rgba(0, 0, 0, 0.4);">
					<text class="text-white">{{val.dur}}</text>
				</view>
			</view>
			<view class="pl-20 flex-1 flex flex-col justify-between">
				<text class="text-sm font-bold">{{val.name}}</text>
				<text class="text-[#666666]">{{val.brief}}</text>
				<view class="flex justify-between">
					<view class="flex items-center">
						<ImageBoxVue src="/static/icons/look.png" width="28rpx" height="29rpx"></ImageBoxVue>
						<text class="ml-10">{{val.look}}万</text>
					</view>
					<view class="flex">
						<view class="flex items-center mr-20">
							<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="29rpx"></ImageBoxVue>
							<text class="ml-10">{{val.redprice}}钻</text>
						</view>
						<view class="flex items-center">
							<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="29rpx"></ImageBoxVue>
							<text class="ml-10">{{val.blueprice}}钻</text>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
		</view>
		<view class="flex justify-between mt-20 " v-if="type=='1'">
			<view class="flex" @click="goStudyDetails(val.id)">
				<view class="w-72 h-72 rounded-full overflow-hidden">
					<ImageBoxVue :src="val.anchor.headimg" width="72rpx" height="72rpx"></ImageBoxVue>
				</view>
				<view class="flex flex-col ml-10 justify-around">
					<text>{{jobQuery(val.anchor)}}</text>
					<text class="">{{val.anchor.name}}</text>
				</view>
			</view>
			<view class="flex">
				<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
					<text class="font-bold">{{val.xdl}}</text>
					<text class="text-[#7290A6]">学到了</text>
				</view>
				<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
					<text class="font-bold">{{val.zdm}}</text>
					<text class="text-[#7290A6]">值得买</text>
				</view>
				<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
					<text class="font-bold">{{val.hyy}}</text>
					<text class="text-[#7290A6]">很有用</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		jobQuery
	} from '@/config/publicFun';

	const {
		val,
		type
	} = defineProps(['val', 'type'])
	
	console.log(val);
	
	const goStudyDetails = (id) => {
		console.log("id",id);
		uni.navigateTo({
			url: `/pages/test/lesson?type=lesson&id=${id}`
		})
	}
</script>

<style>
</style>